<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="react-with-addons.min.js"></script>
    <script src="react-dom.js"></script>
    <script src="react-dom-server.min.js"></script>
    <script src="Recharts.min.js"></script>
    <script src="babel.min.js"></script>
  </head>
  <body>
    <div id="example" style="width: 1000px;height: 800px;"></div>
    <script type="text/babel">
const {LineChart, Line, XAxis, YAxis, CartesianGrid} = Recharts;
const data = [
      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];

const TinyLineChart = React.createClass({
	render () {
  	return (
  <LineChart width={1000} height={400} data={data}>
    <XAxis dataKey="name"/>
    <YAxis/>
    <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
    <Line type="monotone" dataKey="uv" stroke="#8884d8" />
    <Line type="monotone" dataKey="pv" stroke="#82ca9d" />
  </LineChart>
    );
  }
})

ReactDOM.render(
  <TinyLineChart />,
  document.getElementById('example')
);

    </script>
  </body>
</html>
